<template>
	<view class="my-content">
		<!-- <pre>
			{{ formData }}
		</pre> -->
		<view class="form-box">
			<text class="form-title">*爱车车型</text>
			<view class="form-item">
				<!-- <picker mode="selector" :range="carList" @change="formData.name = carList[$event.detail.value]">
					<view class="blue" v-if="formData.name==''">点击选择车型</view>
					<view class="blue" v-else>{{formData.name}}</view>
					
				</picker> -->
				<input type="text" v-model="formData.name" placeholder="请输入车型" />
				
			</view>
		</view>
		<view class="form-box">
			<text class="form-title">*车牌号</text>
			<view class="form-item">
				<view class="picker-box">
					<picker mode="selector" :range="startName"
						@change="carStartName = startName[$event.detail.value]; formData.car_number = carStartName + car_number">
						<view class="blue">{{ carStartName }}</view>
					</picker>
					<image src="../../static/my/jt.png" mode="widthFix"></image>
				</view>
				<input type="text" @input="formData.car_number = carStartName + car_number" v-model="car_number"
					placeholder="请输入车牌号">
			</view>
		</view>
		<view class="form-box">
			<text class="form-title">生产年份</text>
			<view class="form-item">
				<picker mode="date" fields="year" @change="formData.product_at = $event.detail.value">
					<view class="blue">{{ formData.product_at || '点击选择生产年份' }}</view>
				</picker>
			</view>
		</view>
		<view class="form-box">
			<text class="form-title">续航历程(km)</text>
			<view class="form-item">
				<input type="number" v-model="formData.range" placeholder="请输入续航里程，充电中查看充电时间更精准" />
			</view>
		</view>
		<!-- <view class="form-box">
			<text class="form-title">soc充满后自动结束(仅适用于直流终端）</text>
			<view class="form-item">
				<input type="number" placeholder="请输入续航里程，充电中查看充电时间更精准" />
			</view>
		</view> -->
		<view class="form-box">
			<view class="form-title1">
				<text>爱车认证</text>
				<view class="switch-box">
					<text>不认证</text>
					<switch :checked="formData.is_authentication == '2'"
						@change="formData.is_authentication = $event.detail.value ? '2' : '1'"
						style="transform:scale(0.7)" />
					<text>认证</text>
				</view>
			</view>
		</view>
		
		<view v-if="car_flag==true" @click="car_flag=false"  class="mask"></view>
		<image v-if="car_flag==true" @click="car_flag=false"  style="position: fixed;z-index: 99; top: 20%;left: 20%;width: 60%;height: 400px;" src="https://app.yinuoxinnengyuan.cn/static/car.png" mode="widthFix"></image>
		
		<view class="form-box" v-if="formData.is_authentication == '2'">
			<view class="form-title1">
				<text>认证上传驾驶证照片</text>
				<view class="switch-box" @click="car_action">
					<image src="../../static/my/card.png" mode="widthFix"></image>
					<text>示例</text>
				</view>
			</view>
			<view class="card-box" @click="uploadImg">
				<image :src="formData.driver_license || '../../static/my/card1.png'" mode="widthFix"></image>
			</view>
			<text class="form-title">车架号</text>
			<view class="form-item">
				<input type="text" v-model="formData.car_vin" placeholder="请输入车架号" />
			</view>
			<text class="form-title">发动机号</text>
			<view class="form-item">
				<input type="text" v-model="formData.engine_no" placeholder="请输入发动机号" />
			</view>
		</view>
		<button class="submit" @click="submit">保存</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			car_flag:false,
			carStartName: "黑",
			car_number: "",
			startName: ['黑', '京', '沪', '粤', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '桂', '琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁', '新'],
			carList: ['特斯拉 Model 3', '比亚迪 汉', '小鹏 P7', '蔚来 ES6', '理想 ONE', '广汽 Aion S', '威马 EX5', '极狐 阿尔法S', '零跑 C11', '哪吒 U'],
			formData: {
				car_number: "", //车牌号
				car_vin: "", //车架号
				driver_license: "", //驾驶证
				engine_no: "", //发动机号
				is_authentication: "1", //1不认证 2认证
				name: "", //车型
				product_at: "", //生产日期
				range: "", //续航里程
				user_id: "" //用户id
			},
			is_my:0
		}
	},
	onLoad(options) {
		if (options.item) {
			this.formData = JSON.parse(options.item);
			this.carStartName = this.formData.car_number.slice(0, 1);
			this.car_number = this.formData.car_number.slice(1);
		}
		if (options.is_my) {
			this.is_my = options.is_my
		}
	},
	methods: {
		car_action(){
			this.car_flag=true
		},
		async submit() {
			var that = this
			if (!this.formData.car_number) {
				this.toast('请输入车牌号');
				return;
			}
			if (!this.formData.name) {
				this.toast('请选择车型');
				return;
			}
			if (!this.formData.product_at) {
				this.toast('请选择生产年份');
				return;
			}
			if (!this.formData.range) {
				this.toast('请输入续航里程');
				return;
			}
			if (this.formData.is_authentication === '2') {
				if (!this.formData.driver_license) {
					this.toast('请上传驾驶证照片');
					return;
				}
				if (!this.formData.car_vin) {
					this.toast('请输入车架号');
					return;
				}
				if (!this.formData.engine_no) {
					this.toast('请输入发动机号');
					return;
				}
			}

			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			const path = this.formData.id ? "/api/car/update" : "/api/car/add";
			delete this.formData.delete_time
			const res = await this.http("post", path, this.formData, true);
			if (res.code == 200) {
				setTimeout(() => {
					if(that.is_my==0){
						uni.navigateBack();
					}else{
						uni.navigateTo({
							url:'/pages/my/carList'
						})
					}
				}, 1500);
			}
			this.toast(res.message);
			uni.hideLoading();
		},
		uploadImg() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					this.uploadImgSubmit(res.tempFilePaths[0])
				}
			})
		},
		async uploadImgSubmit(url) {
			uni.uploadFile({
				url: "https://app.yinuoxinnengyuan.cn/index.php/api/index/uploads",
				filePath: url,
				name: 'file',
				success: (res) => {
					const data = JSON.parse(res.data);
					this.formData.driver_license = data.data.pic_path;
				}
			})
		}
	}
}
</script>

<style lang="less" scoped>
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
.my-content {
	width: 100%;
	padding: 30upx;
	box-sizing: border-box;

	.form-box {
		width: 100%;
		border-radius: 16upx;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		margin-bottom: 20upx;
		padding: 30upx;
		box-sizing: border-box;

		.form-title {
			font-size: 36upx;
			color: #000;
			font-weight: 700;
			display: block;
		}

		.form-title1 {
			font-size: 36upx;
			color: #000;
			font-weight: 700;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.card-box {
			width: 80%;
			margin: 10upx auto;

			image {
				width: 100%;
			}
		}

		.switch-box {
			display: flex;
			align-items: center;

			image {
				width: 44upx;
				height: auto;
				display: block;
				margin-right: 10upx;
			}

			text {
				color: #A6A6A6;
				font-size: 28upx;
				font-weight: normal;

				&:last-of-type {
					color: #3662EC;
				}
			}
		}

		.form-item {
			margin: 20upx 0;
			font-size: 32upx;
			display: flex;
			align-items: center;

			.blue {
				color: #3662EC;
			}

			.font-num {
				color: #999;
				font-size: 28upx;
				text-align: right;
				display: block;
			}

			.picker-box {
				display: flex;
				align-items: center;
				margin-right: 10upx;

				image {
					width: 48upx;
					height: auto;
				}
			}

			input {
				width: 100%;
			}
		}
	}

	.submit {
		width: 100%;
		height: 80upx;
		border-radius: 16upx;
		background: #FF8F1F;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		color: #fff;
		line-height: 80upx;
		font-size: 44upx;
		font-weight: 700;
		margin-top: 40upx;
	}
}
</style>